<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>ui.js - Aliwork helper</title>
    
    <meta name="description" content="宜搭前端 JS 工具代码库" />
    
        <meta name="keywords" content="Aliwork 宜搭 工具库" />
        <meta name="keyword" content="Aliwork 宜搭 工具库" />
    
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    
    <h2><a href="index.html">Home</a></h2><h2><a href="https://github.com/hackingzhang/aliwork-helper" target="_blank" class="menu-item" >Github</a></h2><h2><a href="https://gitee.com/hexzhangshuai/aliwork-helper" target="_blank" class="menu-item" >Gitee码云</a></h2><h2><a href="https://docs.aliwork.com/docs/developer/api/about" target="_blank" class="menu-item" >宜搭开放API</a></h2><h3>Modules</h3><ul><li><a href="module-DataLinkage.html">DataLinkage</a><ul class='methods'><li data-type='method'><a href="module-DataLinkage.html#.dataLinkage">dataLinkage</a></li><li data-type='method'><a href="module-DataLinkage.html#.dataLinkageSubform">dataLinkageSubform</a></li><li data-type='method'><a href="module-DataLinkage.html#~resolveConditionMap">resolveConditionMap</a></li></ul></li><li><a href="module-DataSource.html">DataSource</a><ul class='methods'><li data-type='method'><a href="module-DataSource.html#.deleteFormData">deleteFormData</a></li><li data-type='method'><a href="module-DataSource.html#.executeTask">executeTask</a></li><li data-type='method'><a href="module-DataSource.html#.fetchSubformDatas">fetchSubformDatas</a></li><li data-type='method'><a href="module-DataSource.html#.fetchSubformDatasAll">fetchSubformDatasAll</a></li><li data-type='method'><a href="module-DataSource.html#.getFormData">getFormData</a></li><li data-type='method'><a href="module-DataSource.html#.getOperationRecords">getOperationRecords</a></li><li data-type='method'><a href="module-DataSource.html#.saveFormData">saveFormData</a></li><li data-type='method'><a href="module-DataSource.html#.searchFormDataIds">searchFormDataIds</a></li><li data-type='method'><a href="module-DataSource.html#.searchFormDataIdsAll">searchFormDataIdsAll</a></li><li data-type='method'><a href="module-DataSource.html#.searchFormDatas">searchFormDatas</a></li><li data-type='method'><a href="module-DataSource.html#.searchFormDatasAll">searchFormDatasAll</a></li><li data-type='method'><a href="module-DataSource.html#.startInstance">startInstance</a></li><li data-type='method'><a href="module-DataSource.html#.updateFormData">updateFormData</a></li></ul></li><li><a href="module-Field.html">Field</a><ul class='methods'><li data-type='method'><a href="module-Field.html#.activateTabItems">activateTabItems</a></li><li data-type='method'><a href="module-Field.html#.fieldToString">fieldToString</a></li><li data-type='method'><a href="module-Field.html#.fieldValueDiff">fieldValueDiff</a></li><li data-type='method'><a href="module-Field.html#.fieldValueEqualSingle">fieldValueEqualSingle</a></li><li data-type='method'><a href="module-Field.html#.generateAssociationFormFieldData">generateAssociationFormFieldData</a></li><li data-type='method'><a href="module-Field.html#.generateDptFieldData">generateDptFieldData</a></li><li data-type='method'><a href="module-Field.html#.generateEmployeeFieldData">generateEmployeeFieldData</a></li><li data-type='method'><a href="module-Field.html#.getFieldDataTypeById">getFieldDataTypeById</a></li><li data-type='method'><a href="module-Field.html#.getFieldTypeById">getFieldTypeById</a></li><li data-type='method'><a href="module-Field.html#.mergeTo">mergeTo</a></li><li data-type='method'><a href="module-Field.html#.syncTo">syncTo</a></li></ul></li><li><a href="module-Subform.html">Subform</a><ul class='methods'><li data-type='method'><a href="module-Subform.html#.associateForm2Subform">associateForm2Subform</a></li><li data-type='method'><a href="module-Subform.html#.sum2Main">sum2Main</a></li><li data-type='method'><a href="module-Subform.html#~resolveFieldMaps">resolveFieldMaps</a></li></ul></li><li><a href="module-UI.html">UI</a><ul class='methods'><li data-type='method'><a href="module-UI.html#.dialog">dialog</a></li><li data-type='method'><a href="module-UI.html#.hijackSubmit">hijackSubmit</a></li><li data-type='method'><a href="module-UI.html#.loading">loading</a></li></ul></li><li><a href="module-Utils.html">Utils</a><ul class='methods'><li data-type='method'><a href="module-Utils.html#.dateTimeFormat">dateTimeFormat</a></li><li data-type='method'><a href="module-Utils.html#.generateRandomId">generateRandomId</a></li><li data-type='method'><a href="module-Utils.html#.isEmpty">isEmpty</a></li><li data-type='method'><a href="module-Utils.html#.retry">retry</a></li><li data-type='method'><a href="module-Utils.html#.round">round</a></li><li data-type='method'><a href="module-Utils.html#.sleep">sleep</a></li></ul></li></ul><h3>Classes</h3><ul><li><a href="FieldChangeLogger.html">FieldChangeLogger</a><ul class='methods'><li data-type='method'><a href="FieldChangeLogger.html#change">change</a></li><li data-type='method'><a href="FieldChangeLogger.html#clear">clear</a></li><li data-type='method'><a href="FieldChangeLogger.html#format">format</a></li></ul></li><li><a href="module-Subform-Subform.html">Subform</a><ul class='methods'><li data-type='method'><a href="module-Subform-Subform.html#getDatas">getDatas</a></li><li data-type='method'><a href="module-Subform-Subform.html#getFormGroupId">getFormGroupId</a></li><li data-type='method'><a href="module-Subform-Subform.html#getFormGroupIds">getFormGroupIds</a></li><li data-type='method'><a href="module-Subform-Subform.html#getIndex">getIndex</a></li><li data-type='method'><a href="module-Subform-Subform.html#getInstance">getInstance</a></li><li data-type='method'><a href="module-Subform-Subform.html#getItem">getItem</a></li><li data-type='method'><a href="module-Subform-Subform.html#setDatas">setDatas</a></li><li data-type='method'><a href="module-Subform-Subform.html#summary">summary</a></li><li data-type='method'><a href="module-Subform-Subform.html#updateItem">updateItem</a></li></ul></li></ul>
    
</nav>

<div id="main">
    
    <h1 class="page-title">ui.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * UI工具方法
 * @module UI
 */

/**
 * 弹出对话框
 * @static
 * @param {Object} context this上下文
 * @param {"alert" | "confirm" | "show"} type 对话框类型，可选'alert', 'confirm', 'show'
 * @param {string} title 对话框标题
 * @param {string | jsx} content 对话框内容，支持传入jsx
 * @returns {Promise} 点击确认则Promise被resolve，点击取消被reject
 *
 * @example
 * export function didMount() {
 *   dialog(this, "confirm", "操作确认", "确认删除此项数据？").then(() => {
 *     console.log("点击确认");
 *   }).catch(() => {
 *     console.log("点击取消");
 *   });
 *
 *   // content参数也可以传入jsx
 *   dialog(this, "alert", "警告", &lt;p color={{ color: "red" }}>数据将被清除，此操作不可撤销&lt;/p>)
 * }
 */
function dialog(context, type, title, content) {
  return new Promise((resolve, reject) => {
    context.utils.dialog({
      type,
      title,
      content,
      footerActions: ["cancel", "ok"],
      onOk: () => {
        resolve();
      },
      onCancel: () => {
        reject();
      },
    });
  });
}

/**
 * 显示加载动画
 * @static
 * @param {Object} context this上下文
 * @param {string} title 提示文本
 * @param {string} size toast尺寸，可选'medium', 'large'
 * @param {boolean} hasMask 是否显示遮罩层，一个遮盖整个页面的半透明黑色背景，可防止用户进行其他操作
 * @returns {Function} 一个函数，调用可关闭加载动画
 *
 * @example
 * export async function onFieldChange({ value }) {
 *   const closeLoading = loading(this, "", "large", true);
 *   // 处理耗时任务
 *   await doSomething(value);
 *   // 任务处理完之后关闭
 *   closeLoading();
 * }
 */
function loading(context, title, size, hasMask = false) {
  return context.utils.toast({
    type: "loading",
    title,
    size,
    hasMask,
  });
}

/**
 * 劫持提交按钮，会在表单提交按钮上方放置一个遮罩，当点击时会调用宜搭JS中export的名为
 * beforeBeforeSubmit的方法。方法执行完成后会模拟点击提交按钮进行正式提交。
 * &lt;br/>
 * ⚠️慎用，一旦宜搭UI变更此方法可能会失效
 * @static
 * @param {Object} context this上下文
 *
 * @example
 * export function didMount() {
 *   hijackSubmit(this);
 * }
 *
 * // 当点击提交时会执行此方法
 * export function beforeBeforeSubmit() {
 *   console.log("before before submit");
 * }
 */
function hijackSubmit(context) {
  const submitBtn = document.querySelector(".deep-form-submit");
  if (!submitBtn) return;

  const wrapper = submitBtn.parentElement;
  wrapper.style.position = "relative";

  const btnBoundingClient = submitBtn.getBoundingClientRect();
  const mask = document.createElement("div");
  mask.style.position = "absolute";
  mask.style.top = submitBtn.offsetTop + "px";
  mask.style.left = submitBtn.offsetLeft + "px";
  mask.style.display = "inline-block";
  mask.style.width = btnBoundingClient.width + "px";
  mask.style.height = btnBoundingClient.height + "px";

  mask.onclick = () => {
    try {
      context.beforeBeforeSubmit;
      submitBtn.click();
    } catch (e) {
      console.log(e.message);
    }
  };

  wrapper.appendChild(mask);
}

export { dialog, loading, hijackSubmit };
</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Tue Mar 19 2024 17:01:50 GMT+0800 (中国标准时间) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>



</body>
</html>
